@using viBook.Helpers
@using viBook.Models
@model Book
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var isBookOwner = (bool)ViewBag.IsBookOwner;
}
@section HeadContent{
    <script src="../../Scripts/imageflow.packed.js" type="text/javascript"> </script>
    <link href="../../Content/imageflow.packed.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/imageflow.css" rel="stylesheet" type="text/css" />
}
<div class="profile-actions profile-actions-shots">
    <ul class="profile-tabs group">
        <li>@Model.NumberOfViews<span class="meta">views</span> </li>
        <li><span data-bind="text: numLike"></span><span class="meta">likes</span></li>
        <li><span data-bind="text: numberOfComments"></span><span class="meta">responses</span></li>
    </ul>
</div>
<div class="full">
    <div id="screenshot-title-section" class="full title">
        <div class="single-title vcard group">
            <a href="#" class="url">
                <img alt="@Model.Uploader.DisplayName " class="photo fn" src="@Model.Uploader.AvatarUrl" />
            </a>
            <h1>@Model.Title</h1>
            <div class="shot-byline">
                <span class="shot-byline-user">uploaded by <a class = "url" href= '@("/Account/Index/" + @Model.UploadedBy)'>@Model.Uploader.DisplayName</a>
                </span><span class="screenshot-dash"><span class="sep">|</span>written by <a class = "url" href= @("/Authors/details/" + @Model.AuthorId)>@Model.AuthorName</a></span>
                <span class="screenshot-dash"><span class="sep">|</span> @Model.UploadedDate.ConvertDateToString()
                </span>
            </div>
        </div>
    </div>
</div>
<div id="main">
    <div id="screenshot-meta">
        <div id="like-section" class="meta-act logged-in">
            <div class="group fav " data-bind="css: { 'marked': isLiked}">
                <strong class="fav-number"><a href="#"><span data-bind="text: numLike"></span>&nbsp;likes</a></strong>
                <a href="#" class="meta-act-link meta-like fav-toggle" data-bind="click: like" title="You like this screenshot. Click to undo.">
                    <span data-bind="visible: isLiked">You like</span> <span data-bind="visible: isLiked()==false">
                        Like?</span> </a>
            </div>
        </div>
        <div class="meta-act">
            <div class="bucket ">
                <a href="#" class="meta-act-link meta-bucket">Views</a> <strong class="bucket-number">
                    <a href="#">
                        @Model.NumberOfViews</a> </strong>
            </div>
        </div>
        <div class="meta-act meta-act-last">
            <div class="meta-act-link meta-share">
                <form id="share-form">
                <fieldset>
                    <input type="text" id="share-form-url" name="share-form-url" class="form-text" value="@Url.Action("Details", "Books", new { id = @Model.Id }, "http")"
                               readonly="readonly">
                </fieldset>
                </form>
            </div>
        </div>
        <div class="meta-act meta-act-last">
            <div class="meta-act-link">
                @*                <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;@Request.Url.AbsoluteUri>" data-bind="click:shareOnFacebook" target="_blank" class="fb_share_link">Share on Facebook</a>*@
                <!-- AddThis Button BEGIN -->
                <div class="addthis_toolbox addthis_default_style ">
                    <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
                    </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
                    </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
                    </a>
                </div>
                <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e4890a0338ec951"></script>
                <!-- AddThis Button END -->
            </div>
        </div>
        <div class="meta-act meta-act-last">
            <div class="bucket ">
                <a href="#" class="meta-act-link meta-bucket">Description</a>
                <div style="padding-left: 15px">
                    <strong class="book-description">
                        @Model.Description </strong>
                </div>
            </div>
        </div>
        <h3 class="meta-head">Tags</h3>
        <ol id="content-tags" class="tags group" data-bind="template:{name:'ContentTagTemplate' ,foreach: contentTagCollection}">
        </ol>
        <ul class="admin">
            <li id="flag-section" class="flag"><a href="#" data-bind="click: flag"><span data-bind="visible: isReported()==false">
                Flag as inappropriate</span></a> <span data-bind="visible: isReported">Flaged</span>
            </li>
        </ul>
    </div>
    <div id="the-shot">
        <div id="single">
            <div id="single-grid">
                <div id="single-img">
                    <img alt="@Model.Title cover" src="@Model.CoverUrl" width="400" /></div>
            </div>
            @if (@isBookOwner)
            {
                <p>
                    <a href="#" type="button" id="btnDelete" data-bind="click: deleteBook">Delete</a>
                    |
                    @Html.ActionLink("Edit", "Edit", new { id = @Model.Id }) |
                    @Html.ActionLink("Create new chapter", "Create", "Chapters", new { bookid = Model.Id }, null)
                </p>
            }
        </div>
    </div>
    @if (@Model.Chapters != null && @Model.Chapters.Count() > 0)
    {
        <div id="myImageFlow" class="imageflow" data-bind="template: {name:'ListChapterTemplate', foreach: chapterCollection}">
        </div>
    }
    <div id="comments-section" data-bind="template: {name:'CommentTemplate'}">
    </div>
</div>
<div id="secondary">
    <h3 class="tab">
        <a href="#">User <span class="meta">Books</span></a>
    </h3>
    <ol class="buckets group">
        <div data-bind='template: { name: "shortBook-template", foreach: listUserBook}' id="list-UserBook" />
    </ol>
    <h3 class="tab">
        <a href="#">Author <span class="meta">Books</span></a></h3>
    <ol class="buckets group">
        <div data-bind='template: { name: "shortBook-template", foreach: listAuthorBook}'
            id="list-AuthorBook" />
    </ol>
</div>
<script id='shortBook-template' type="text/html">
     <li class="group">
     <a  data-bind="attr: { href: '/books/details/'+ id}">
     <span class="bucket-img">
            <img data-bind="attr: {src: coverImage,alt:title}" />    </span>
            <strong> <span data-bind="text: title"/></strong> 
            <span class="bucket-meta"><span data-bind="text: numberOfViews"></span> views</span>
            <span class="bucket-meta">uploaded: 
            <span data-bind="text: uploadedDateString"/> 
            </span> 
      </a></li>
</script>
<script id="ListChapterTemplate" type="text/html">
    <img data-bind="attr: {src: ChapterImage,alt: ChapterName, data_navigation_url: '/chapters/details/'+Id()}"/>                                   
</script>
<script id="ContentTagTemplate" type="text/html">
    <li data-bind="attr: { id:'tag-li-'+ id()}" class="tag" >
        <em><span data-bind="text: numberOfBook"></span></em> 
        <a data-bind="attr: { href: '/ContentTags/details/'+ id()}" rel="tag"><strong><span data-bind="text: contentTagName"></span></strong></a>
    </li>
</script>
@Html.Partial("~/Views/Chapters/_CommentTemplate.cshtml")
@Html.Partial("DetailsJS")
